<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Maps</title>
  <meta name="description" content="">
  <link href="/css/bot4.css" rel="stylesheet">
  <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,400italic,700' rel='stylesheet' type='text/css'>
  <link href="/css/font-awesome.min.css" rel="stylesheet">
  <link href="/css/bootstrap.min.css" rel="stylesheet">
  <link href="/jqvmap/jqvmap.css" media="screen" rel="stylesheet" type="text/css" />
  <link href="/css/templatemo-style.css" rel="stylesheet">

  <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>
<style>
  .col-1 {
    max-width: none;
  }

  .col-2 {
    max-width: none;
  }
  .img{
    text-align: center;
    width: 100px;
    height: 100px;
    margin: 0 auto;
    position: relative;
   
  }
  .img img{
    width: 100%;
    height: 100%;
    border-radius: 10px;
    border: 2px solid #c93030;
  }
  .img input{
    width: 100%;
    height: 100%;
    opacity: 0;
    position: absolute;
    left: 0;
    top: 0;
  }
  .box{
    text-align: center;
  }
  .box button{
    margin-right: 20px;
  }
  /* .form-control.is-valid,.form-control.is-invalid{
    background-image: none;
  } */
</style>

<body>
  <!-- Left column -->
  <div class="templatemo-flex-row">
    <%- include('./header.ejs',{idx:'addadmin'}) %>
    <!-- Main content -->
    <div class="templatemo-content col-1 light-gray-bg">
      <div class="templatemo-top-nav-container">
        <div class="row">
          <nav class="templatemo-top-nav col-lg-12 col-md-12">
            <ul class="text-uppercase">
              <li><a href="" class="active">Admin panel</a></li>
              <li><a href="">Dashboard</a></li>
              <li><a href="">Overview</a></li>
              <li><a href="login.html">Sign in form</a></li>
            </ul>
          </nav>
        </div>
      </div>
      <div class="templatemo-content-container">
        <div class="templatemo-content-widget add white-bg">
          <h2 style="margin:10px 0 10px 0;">山西传媒学院动画学院</h2>
          <h5 style="padding-bottom:10px; border-bottom:1px solid #b1b1b1;">增加管理员</h5>
          
          <form id="form" enctype="multipart/form-data">
            <div class="img">
              <img src="/images/mr.jpg" alt="" id="img">
              <input  type="file" class="file" name="file" accept="image/*" onchange="preview(this)">
            </div>
            <div class="mb-3">
              <label for="validationServer01">用户名</label>
              <input autocomplete="off" name="user" type="text" placeholder="请输入用户名" class="form-control name" id="validationServer01" value="" required>
              <div class="names valid-feedback">
                Looks good!
              </div>
            </div>
            <div class=" mb-3">
              <label for="validationServer02">密码</label>
              <input autocomplete="off" name="pwd" type="password" placeholder="请输入密码" class="pwd form-control " id="validationServer02" value="" required>
              <div class="pwds invalid-feedback">
                Looks good!
              </div>
            </div>
            <div class=" mb-3">
              <label for="validationServer02">密保</label>
              <input autocomplete="off" name='ido' type="text" placeholder="你的偶像" class="ido form-control " id="validationServer02" value="" required>
              <div class="idos valid-feedback">
                Looks good!
              </div>
            </div>
            <div class="box"> 
              <button  class="btn go btn-primary" type="button">提交</button>
              <button class="btn res btn-primary" type="reset">重置</button>
            </div>
           
          </form>
        </div>
        <div class="templatemo-flex-row flex-content-row">
          <div class="col-1">
            <div class="panel panel-default margin-10">
              <div class="panel-heading">
                <h2>World</h2>
              </div>
              <div class="panel-body">
                <div id="vmap_world" class="vmap"></div>
              </div>
            </div>
          </div>
          <div class="col-1">
            <div class="panel panel-default margin-10">
              <div class="panel-heading">
                <h2>Africa</h2>
              </div>
              <div class="panel-body">
                <div id="vmap_africa" class="vmap"></div>
              </div>
            </div>
          </div>
        </div>
        <div class="templatemo-flex-row flex-content-row">
          <div class="col-1">
            <div class="panel panel-default margin-10">
              <div class="panel-heading">
                <h2>Asia</h2>
              </div>
              <div class="panel-body">
                <div id="vmap_asia" class="vmap"></div>
              </div>
            </div>
          </div>
          <div class="col-1">
            <div class="panel panel-default margin-10">
              <div class="panel-heading">
                <h2>Australia</h2>
              </div>
              <div class="panel-body">
                <div id="vmap_australia" class="vmap"></div>
              </div>
            </div>
          </div>
        </div>
        <div class="templatemo-flex-row flex-content-row">
          <div class="col-1">
            <div class="panel panel-default margin-10">
              <div class="panel-heading">
                <h2>Europe</h2>
              </div>
              <div class="panel-body">
                <div id="vmap_europe" class="vmap"></div>
              </div>
            </div>
          </div>
          <div class="col-1">
            <div class="panel panel-default margin-10">
              <div class="panel-heading">
                <h2>United States of America</h2>
              </div>
              <div class="panel-body">
                <div id="vmap_usa" class="vmap"></div>
              </div>
            </div>
          </div>
        </div>
        <div class="templatemo-flex-row flex-content-row">
          <div class="col-1">
            <div class="panel panel-default margin-10">
              <div class="panel-heading">
                <h2>North America</h2>
              </div>
              <div class="panel-body">
                <div id="vmap_northamerica" class="vmap"></div>
              </div>
            </div>
          </div>
          <div class="col-1">
            <div class="panel panel-default margin-10">
              <div class="panel-heading">
                <h2>South America</h2>
              </div>
              <div class="panel-body">
                <div id="vmap_southamerica" class="vmap"></div>
              </div>
            </div>
          </div>
        </div>

        <%- include('./foot.ejs') %>
      </div>

    </div>
  </div>

  <!-- JS -->
  <script type="text/javascript" src="/js/jquery-1.11.2.min.js"></script> <!-- jQuery -->
  <script type="text/javascript" src="/js/jquery-migrate-1.2.1.min.js"></script> <!--  jQuery Migrate Plugin -->
  <script type="text/javascript" src="/js/templatemo-script.js"></script> <!-- Templatemo Script -->
  <script type="text/javascript" src="/jqvmap/jquery.vmap.js"></script>
  <script type="text/javascript" src="/jqvmap/maps/jquery.vmap.world.js"></script>
  <script type="text/javascript" src="/jqvmap/data/jquery.vmap.sampledata.js"></script>
  <script src="/jqvmap/maps/continents/jquery.vmap.africa.js" type="text/javascript"></script>
  <script src="/jqvmap/maps/continents/jquery.vmap.asia.js" type="text/javascript"></script>
  <script src="/jqvmap/maps/continents/jquery.vmap.australia.js" type="text/javascript"></script>
  <script src="/jqvmap/maps/continents/jquery.vmap.europe.js" type="text/javascript"></script>
  <script src="/jqvmap/maps/continents/jquery.vmap.north-america.js" type="text/javascript"></script>
  <script src="/jqvmap/maps/continents/jquery.vmap.south-america.js" type="text/javascript"></script>
  <script src="/jqvmap/maps/jquery.vmap.usa.js" type="text/javascript"></script>
  <script src="/js/maps.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
  <script type="text/javascript">

    function drawMaps() {
      $('#vmap_world').vectorMap({
        map: 'world_en',
        backgroundColor: '#ffffff',
        color: '#333',
        hoverOpacity: 0.7,
        selectedColor: '#666666',
        enableZoom: true,
        showTooltip: true,
        values: sample_data,
        scaleColors: ['#C8EEFF', '#006491'],
        normalizeFunction: 'polynomial'
      });
      $('#vmap_africa').vectorMap({
        map: 'africa_en',
        backgroundColor: '#ffffff',
        color: '#333333',
        hoverOpacity: 0.7,
        selectedColor: '#666666',
        enableZoom: true,
        showTooltip: true,
        values: sample_data,
        scaleColors: ['#C8EEFF', '#006491'],
        normalizeFunction: 'polynomial'
      });
      $('#vmap_asia').vectorMap({
        map: 'asia_en',
        backgroundColor: '#ffffff',
        color: '#333333',
        hoverOpacity: 0.7,
        selectedColor: '#666666',
        enableZoom: true,
        showTooltip: true,
        values: sample_data,
        scaleColors: ['#C8EEFF', '#006491'],
        normalizeFunction: 'polynomial'
      });
      $('#vmap_australia').vectorMap({
        map: 'australia_en',
        backgroundColor: '#ffffff',
        color: '#333333',
        hoverOpacity: 0.7,
        selectedColor: '#666666',
        enableZoom: true,
        showTooltip: true,
        values: sample_data,
        scaleColors: ['#C8EEFF', '#006491'],
        normalizeFunction: 'polynomial'
      });
      $('#vmap_europe').vectorMap({
        map: 'europe_en',
        backgroundColor: '#ffffff',
        color: '#333333',
        hoverOpacity: 0.7,
        selectedColor: '#666666',
        enableZoom: true,
        showTooltip: true,
        values: sample_data,
        scaleColors: ['#C8EEFF', '#006491'],
        normalizeFunction: 'polynomial'
      });
      $('#vmap_northamerica').vectorMap({
        map: 'north-america_en',
        backgroundColor: '#ffffff',
        color: '#333333',
        hoverOpacity: 0.7,
        selectedColor: '#666666',
        enableZoom: true,
        showTooltip: true,
        values: sample_data,
        scaleColors: ['#C8EEFF', '#006491'],
        normalizeFunction: 'polynomial'
      });
      $('#vmap_southamerica').vectorMap({
        map: 'south-america_en',
        backgroundColor: '#ffffff',
        color: '#333333',
        hoverOpacity: 0.7,
        selectedColor: '#666666',
        enableZoom: true,
        showTooltip: true,
        values: sample_data,
        scaleColors: ['#C8EEFF', '#006491'],
        normalizeFunction: 'polynomial'
      });
      $('#vmap_usa').vectorMap({
        map: 'usa_en',
        enableZoom: true,
        showTooltip: true,
        selectedRegion: 'MO'
      });
    } // end function drawMaps

    $(document).ready(function () {
      // if (window.name != "noReload") {
      //   window.name = "noReload";
      //   location.reload();
      // } else {
      //   window.name = "";
      // }

      if (document.addEventListener) {
        /*event.persisted 判断浏览器是否有缓存, 有为true, 没有为false*/
        window.addEventListener('pageshow', function (event) {
          if (event.persisted || window.performance && window.performance.navigation.type == 2) {
            location.reload();
          }
        }, false);
      }
      
      if ($.browser.mozilla) {
        //refresh page on browser resize
        // http://www.sitepoint.com/jquery-refresh-page-browser-resize/
        $(window).bind('resize', function (e) {
          if (window.RT) clearTimeout(window.RT);
          window.RT = setTimeout(function () {
            this.location.reload(false); /* false to get page from cache */
          }, 200);
        });
      } else {
        $(window).resize(function () {
          drawMaps();
        });
      }

      drawMaps();

      
      new Maps()

    });
    
    //上传图片   file是input 上传图片 
    function preview(file) {
        // console.log(file);
        if (file.files && file.files[0]) {//如果  上传了图片
          var reader = new FileReader(file.files[0])

          reader.readAsDataURL(file.files[0])//读取文件路径  把传的文件数据  转换成src路径

          reader.onload = function (ev) {
            // console.log(ev.target);//也就是一大段 路径
            img.src = ev.target.result;
          }

        }

      }
  </script>
</body>

</html>